<template>
  <div>
    <div class="banner">
      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/banner3@2x.png"
        mode="scaleToFill"
      />
    </div>
    <div
      class="list"
      v-for="(item,index) in arrList"
      :key="index"
      @click="openClick(item)"
    >
      <div class="left">
        <img :src="item.icon" mode="scaleToFill" class="icon" />
        <div class="text">
          <p class="p1">
            <span :style="{color:item.color}">{{item.name}}</span>
            <span>{{item.kouh}}</span>
          </p>
          <p>{{item.label}}</p>
        </div>
      </div>
      <div class="right">
        <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill" />
        <p v-if="!item.isClick">{{item.setMoney}}</p>
        <p v-else>已缴费</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentPageParams } from '@/utils'
import { domain } from '@/utils/request'
import {
  FIND_OPEN_SHOP_INFO,
  FIND_CUSTOMER_SHOP_OPEN_STATE,
  FIND_OPEN_SHOP_ORDER_INFO
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      arrList: [],
      initList: [
        {
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/jf1.png',
          name: '实业宝',
          kouh: '(必须要求有营业执照)',
          label: '开通线上微商城+线下收款二维码',
          shopIdentity: 'ENTITY',
          color: '#337ab7',
          isClick: false
        },
        {
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/jf2.png',
          name: '网商宝',
          kouh: '(自然人可开通使用)',
          label: '开通线上体验为商城+线下收款二维码+增值服务推广赚钱',
          shopIdentity: 'VIRTUAL',
          color: '#d5b7de',
          isClick: false
        },
        {
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/jf3.png',
          name: '创业宝',
          kouh: '(自然人可开通使用)',
          label: '仅使用线下二维码收款和锁客',
          shopIdentity: 'PERSONAL',
          color: '#eaa877',
          isClick: false
        }
      ],
      openShopList: [],
      isPay: '',
      openShopOrderNo: '',
      formData: {}
    }
  },
  computed: {
    // formData () {
    //   let obj = {}
    //   obj.customerId = getCurrentPageParams('customerId')
    //   obj.mobile = getCurrentPageParams('mobile')
    //   return obj
    // }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.arrList = []
    this._findList()
  },
  methods: {
    openClick (item) {
      const vm = this
      let val = item.shopIdentity

      if (item.isFree === 'Y') {
        let dom = `${domain.replace(/\/\w*$/, '')}/small-store/`
        let providerId = vm.$store.state.account.providerId
        let list = [
          {
            val: 'PERSONAL',
            address: 'shop-open-submit1',
            param: `openShopOrderNo=${vm.openShopOrderNo}&customerId=${
              vm.formData.customerId
            }&providerId=${providerId}`
          },
          {
            val: 'VIRTUAL',
            address: 'shop-open-submit1',
            param: `openShopOrderNo=${vm.openShopOrderNo}&customerId=${
              vm.formData.customerId
            }&providerId=${providerId}&v=Y`
          },
          {
            val: 'ENTITY',
            address: 'shop-open-submit2',
            param: `openShopOrderNo=${vm.openShopOrderNo}&customerId=${
              vm.formData.customerId
            }&providerId=${providerId}`
          }
        ]
        for (let i = 0; i < list.length; i++) {
          if (list[i].val === val) {
            let val = encodeURIComponent(
              `${dom}${list[i].address}?${
                list[i].param
              }&poundageRatioStart=0.01&poundageRatioEnd=0.01`
            )
            vm.$router.push(`/pages/open-shop/xcxLink/index?openURL=${val}`)

            // vm.$router.push(
            //   `/pages/open-shop/link2/main?openURL=${dom}${list[i].address}?${
            //     list[i].param
            //   }`
            // )
            break
          }
        }
      } else {
        if (!item.isClick && vm.isPay === 'N') {
          vm.$router.push(
            `/pages/open-shop/open-shop-set/main?img=${item.img}&amount=${
              item.amount
            }&openShopOrderNo=${vm.openShopOrderNo}&customerId=${
              vm.formData.customerId
            }&shopIdentity=${item.shopIdentity}`
          )
        } else if (!item.isClick && vm.isPay === 'Y') {
          vm.$toast('您已缴费，不能申请其他')
        } else {
          let dom = `${domain.replace(/\/\w*$/, '')}/small-store/`
          let providerId = vm.$store.state.account.providerId
          let list = [
            {
              val: 'PERSONAL',
              address: 'shop-open-submit1',
              param: `openShopOrderNo=${vm.openShopOrderNo}&customerId=${
                vm.formData.customerId
              }&providerId=${providerId}`
            },
            {
              val: 'VIRTUAL',
              address: 'shop-open-submit1',
              param: `openShopOrderNo=${vm.openShopOrderNo}&customerId=${
                vm.formData.customerId
              }&providerId=${providerId}&v=Y`
            },
            {
              val: 'ENTITY',
              address: 'shop-open-submit2',
              param: `openShopOrderNo=${vm.openShopOrderNo}&customerId=${
                vm.formData.customerId
              }&providerId=${providerId}`
            }
          ]
          for (let i = 0; i < list.length; i++) {
            if (list[i].val === val) {
              let val = encodeURIComponent(
                `${dom}${list[i].address}?${
                  list[i].param
                }&poundageRatioStart=0.01&poundageRatioEnd=0.01`
              )
              vm.$router.push(`/pages/open-shop/xcxLink/index?openURL=${val}`)

              // vm.$router.push(
              //   `/pages/open-shop/link2/main?openURL=${dom}${list[i].address}?${
              //     list[i].param
              //   }`
              // )
              break
            }
          }
        }
      }
    },
    _findList () {
      const vm = this
      vm.formData = {
        customerId: getCurrentPageParams('customerId'),
        mobile: getCurrentPageParams('mobile')
      }
      let params = {
        providerId: vm.$store.state.account.providerId,
        customerId: vm.formData.customerId,
        openShopType: 'OPEN'
      }
      let isClick = ''
      FIND_OPEN_SHOP_INFO(params)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data && r.data.data.isPay === 'Y') {
              let { openShopOrderNo } = r.data.data
              vm.openShopOrderNo = openShopOrderNo
              FIND_CUSTOMER_SHOP_OPEN_STATE(params)
                .then(res => {
                  if (res.data.code === '0') {
                    if (res.data.data && res.data.data.state === -1) {
                      // 已经完成开店
                      vm.$alert('您的开店申请正在审核中', '').then(() => {
                        this.$router.go(-1)
                      })
                    } else {
                      FIND_OPEN_SHOP_ORDER_INFO(openShopOrderNo)
                        .then(r => {
                          if (r.data.code === '0') {
                            isClick = r.data.data.shopIdentity
                            vm.arrList.forEach(_ => {
                              if (_.shopIdentity === isClick) {
                                _.isClick = true
                              }
                            })
                          } else {
                            vm.$toast(r.data.message)
                          }
                        })
                        .catch(e => {
                          console.error(e)
                        })
                      // 进入开店
                      // vm.$router.push(
                      //   '/pages/open-shop/link/main?openShopOrderNo=' +
                      //     openShopOrderNo +
                      //     '&customerId=' +
                      //     params.customerId
                      // )
                    }
                  } else {
                    vm.$toast(res.data.message)
                  }
                })
                .catch(err => {
                  console.error(err)
                })
            }
          } else {
            vm.$toast(r.data.message)
          }

          if (r.data.code === 'ORDER-STATE-ERROR') {
            vm.$alert(r.data.message, '').then(() => {
              this.$router.go(-1)
            })
            return false
          }

          let { isPay, openShopList, openShopOrderNo } = r.data.data
          vm.isPay = isPay
          vm.openShopList = openShopList
          vm.openShopOrderNo = openShopOrderNo

          vm.initList.forEach(_ => {
            openShopList.forEach(e => {
              if (_.shopIdentity === e.shopIdentity) {
                // if (isClick && isClick === _.shopIdentity) {
                //   _.isClick = true
                // }
                e.setMoney =
                  e.isFree === 'N'
                    ? '￥' + (e.amount * 0.01).toFixed(2)
                    : '限时免费'
                vm.arrList.push({ ..._, ...e })
              }
            })
          })
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
.list {
  width: 95%;
  margin: 10px auto;
  border: 1px solid #f9e7e7;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  // position: relative;
  .left {
    padding: 26px 0;
    display: flex;
    .icon {
      width: 30px;
      height: 30px;
      margin: 0 5px;
    }
    .text {
      position: absolute;
      width: 270px;
      left: 55px;
      font-size: 12px;
      color: #545250;
      .p1 {
        font-size: 14px;
        margin: 3px 2px 0 0;
      }
    }
  }
  .right {
    position: relative;
    display: flex;
    align-items: flex-start;
    img {
      width: 5px;
      height: 10px;
      margin: 0 5px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    p {
      font-size: 10px;
      color: #fff;
      padding: 3px 4px;
      background: red;
      border-radius: 4px;
      margin: 4px 4px 0 0;
      // position: absolute;
      // top: 4px;
      // right: 4px;
    }
  }
}
</style>